<template>
  <div>
    <!-- 再dom里使用ref定义的值的时候，不用.value，dom会自动给你加上 -->
    <div>{{ name }}</div>
    <button @click="changeName">改变名字</button>
    <!-- reactive的使用 -->
    <div>{{ menu }}</div>
    <button @click="changeMenu">加菜</button>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    // 使用ref来定义双向绑定的数据，只需要执行ref方法，如果有默认值的话，传入默认值即可
    let name = ref("小明");
    // let name = {value:"小明"}
    const changeName = () => {
      // 当需要改变用ref来定义的值的时候，一定要更改这个值下面的value属性
      name.value = "小红";
      console.log(name);
    };

    // reactive的使用
    // reactive只能定义复杂类型的数据（比如对象、比如数组）
    let menu = reactive(["宫保鸡丁"]);
    const changeMenu = () => {
      menu.push("辣子鸡丁");
    };

    // 在dom中使用到的方法和变量一定要return出去
    return { name, changeName, menu, changeMenu };
  },
};
</script>
<style></style>
